<template>
  <div class="bg">
    <!-- 头部 -->
    <Header title="系统管理—仓库权限管理"></Header>
    >
    <!-- 搜索栏 -->
    <section class="search_bar">
      <LInput label="角色名称" v-model="a"></LInput>
      <LButton label="查询数据" style="margin-left:16px"></LButton>
    </section>
    <!-- 标签页 -->
    <el-tabs type="border-card">
      <el-tab-pane label="仓库权限">
        <div style="display:flex;height:65vh;overflow:auto">
          <!-- 1 -->
          <div style="width: 42%;margin-right:5%">
            <!-- 表格（单选） -->
            <el-table :data="tableData" style="width: 100%" border ref="tableDataRef" @current-change="tableDataSelected" size="small" highlight-current-row>
              <el-table-column label="角色名称" prop="a" />
            </el-table>
          </div>
          <!-- 2 -->
          <div style="width: 50%;" class="pop-2">
            <el-table :data="tableData1" style="width: 100%" border ref="tableData1Ref" @selection-change="tableData1Selected">
              <el-table-column type="selection" width="35" />
              <el-table-column label="仓库名称" prop="a" />
            </el-table>
          </div>
        </div>
        <div style="height:2vh;margin-top:2vh">
          <el-button type="primary" size="mini" style="position:absolute;right:4vw;bottom:1vh">保存</el-button>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Header from "@/components/Header";
import moment from "moment";
import LInput from "../../../components/LInput.vue";
import LDateTimeSelect2 from "../../../components/LDateTimeSelect2.vue";
import LButton from "../../../components/LButton.vue";
import LSelect from "@/components/LSelect.vue";
import Template from "@/views/OperaManage/Equipment/template.vue";

export default {
  components: {
    Header,
    LInput,
    LDateTimeSelect2,
    LButton,
    LSelect,
    Template,
  },
  data() {
    return {
      a: "",
      tableData: [
        {
          a: "角色1",
        },
        {
          a: "角色2",
        },
        {
          a: "角色3",
        },

        {
          a: "角色4",
        },

        {
          a: "角色5",
        },
        {
          a: "角色6",
        },

        {
          a: "角色7",
        },

        {
          a: "角色8",
        },
      ],
      tableDataSelect: null,
      tableData1: [
        {
          a: "仓库1",
        },
        {
          a: "仓库2",
        },
        {
          a: "仓库3",
        },
        {
          a: "仓库4",
        },

        {
          a: "仓库5",
        },
        {
          a: "仓库6",
        },
        {
          a: "仓库7",
        },
      ],
      tableData1Select: null,
    };
  },
  mounted() {
    this.tableDataSelected(this.$refs.tableDataRef.data[0]);
  },
  beforeUnmount() {},
  methods: {
    //单选值
    tableDataSelected(val) {
      console.log("当前单选值----", val);
      this.$refs.tableDataRef.setCurrentRow(val);
      this.tableDataSelect = val;
    },
    //多选值
    tableData1Selected(val) {
      console.log("当前多选值+++++", val);
      this.tableData1Select = val;
    },
  },
};
</script>


<style lang="less" scoped>
@import "../../OperaManage/opera.less";

.search_bar {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.row-1 {
  display: flex;
  justify-content: space-between;
  padding: 0 2vw 0 0;
}

/deep/ .el-table {
  --el-table-row-hover-background-color: rgba(255, 255, 255, 0.2);
  --el-table-current-row-background-color: rgba(255, 255, 255, 0.2);
}
</style>